<template>
  <div class="surface-drawer">
    <!-- 编辑批记录项 Start -->
    <div class="drawer-box" v-if="show">
      <header>
        <div class="header-close" @click="onClose">
          <img src="@/assets/img/Icon/返回.png" alt="" />
        </div>
        <a-form layout="inline" class="header-button">
          <!-- <a-form-item>
            <a-button class="default-button"> 导入 </a-button></a-form-item> -->
          <a-form-item v-show="!isBill">
            <a-button class="default-button" @click="increaseTable">
              新增模板
            </a-button></a-form-item
          >
        </a-form>
      </header>

      <div class="drawer-content">
        <div
          class="singleton-table"
          v-for="(itm, idx) in batchRecordList"
          :key="idx"
        >
          <!-- 批记录信息 Start -->
          <div class="singleton-title">
            <span class="num-tip">{{ itm.JobTempletIndex }}</span>
            <span class="name">{{ itm.JobTempletName }}</span>

            <span
              ><a-tag
                :color="
                  itm.TableType == 1
                    ? '#50AF4B'
                    : itm.TableType == 2
                    ? '#0982F5'
                    : '#846BE9'
                "
              >
                {{
                  itm.TableType == 1
                    ? "单例表单"
                    : itm.TableType == 2
                    ? "聚合表单"
                    : "视图表单"
                }}
              </a-tag></span
            >

            <span style="margin-right: 0.9375rem">
              <a-button
                size="small"
                :icon="itm.titleShow ? 'up' : 'down'"
                class="default-button"
                @click="itm.titleShow = !itm.titleShow"
              >
                {{ itm.titleShow ? "收起" : "展开" }}
              </a-button>
            </span>
            <span style="cursor: pointer">
              <a-dropdown :trigger="['click']">
                <img
                  src="@/assets/img/Icon/展开.png"
                  alt=""
                  style="height: 1.25rem; width: 1.25rem"
                />
                <a-menu slot="overlay">
                  <a-menu-item key="1">
                    <span @click="editSingleton(itm)">修改模板</span>
                  </a-menu-item>
                  <a-menu-item key="2">
                    <span @click="delSingleton(itm)">删除模板</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown></span
            >
          </div>
          <!-- 批记录信息 End -->

          <!--聚合 单例 表单展示  Start -->
          <div
            class="table"
            v-if="(itm.TableType == 2 || itm.TableType == 1) && itm.titleShow"
          >
            <div v-if="itm.TableType == 1">
              <batch-table
                :isTemplate="true"
                :mateCurrentInfo="currentInfo"
                :list="itm.itemTitleList"
                :item="itm"
                flag="1"
              ></batch-table>
            </div>
            <div
              class="two-batch-table"
              v-if="itm.titleList.length && itm.TableType == 2"
            >
              <poly-title
                :itm="itm"
                :mateCurrentInfo="currentInfo"
                :isTemplate="true"
              ></poly-title>
            </div>
            <a-row
              v-if="itm.itemList.length > 0"
              type="flex"
              justify="center"
              :gutter="[16, 0]"
              style="margin: 0.9375rem 0"
            >
              <a-col
                v-for="(item, index) in singLetonTitleList"
                :key="index"
                class="flex-center"
                :span="item.span"
              >
                {{ item.name }}
              </a-col>
            </a-row>
            <singleton-list
              :isTemplate="true"
              :itm="itm"
              :list="itm.itemList"
              :typelist="dataTypeList"
              @settionShowFun="settionFun"
              @upList="upListFun"
              :titleList="singLetonTitleList"
              @saveList="saveItemFun"
            ></singleton-list>
          </div>
          <!--聚合表单展示  End -->

          <!-- 视图表单展示 Start -->
          <div class="table" v-if="itm.TableType == 3 && itm.titleShow">
            <a-row
              v-if="itm.itemList.length > 0"
              type="flex"
              justify="center"
              :gutter="[16, 0]"
              style="margin: 0.9375rem 0"
            >
              <a-col
                v-for="(item, index) in viewTitleList"
                :key="index"
                class="flex-center"
                :span="item.span"
              >
                {{ item.name }}
              </a-col>
            </a-row>
            <view-list
              :isTemplate="true"
              :itm="itm"
              :list="itm.itemList"
              :typelist="dataTypeList"
              @settionShowFun="settionFun"
              @upList="upListFun"
              :titleList="singLetonTitleList"
              @saveList="saveItemFun"
            ></view-list>
          </div>
          <!-- 视图表单展示 End -->

          <footer class="footer-btn" v-show="itm.titleShow">
            <span style="margin-right: 0.9375rem" v-show="itm.TableType == 3">
              <a-button
                size="small"
                class="default-button"
                @click="checkCond(itm)"
              >
                输入条件
              </a-button>
            </span>
            <span style="margin-right: 0.9375rem">
              <a-button
                size="small"
                class="default-button"
                @click="delItem(itm)"
              >
                批量删除
              </a-button>
            </span>
            <span style="margin-right: 0.9375rem">
              <a-button
                size="small"
                class="default-button"
                @click="saveItem(itm)"
              >
                保存
              </a-button>
            </span>
            <span style="margin-right: 0.9375rem">
              <a-button
                size="small"
                class="default-button"
                @click="singletonAdd(itm)"
              >
                新增工作项
              </a-button>
            </span>
            <span style="margin-right: 0.9375rem">
              <a-button
                size="small"
                class="default-button"
                @click="singletonBatchAdd(itm)"
              >
                批量新增工作项
              </a-button>
            </span>
          </footer>
        </div>
      </div>
    </div>
    <!-- 编辑批记录项 End -->

    <!-- 新增修改批记录表单 Start -->
    <a-modal
      v-model="tableVisible"
      :title="tableIsEidt ? '修改模板' : '新增模板'"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="tableRuleForm"
        :model="tableRuleForm"
        :rules="tableRules"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="表单类型">
          <a-radio-group
            v-model="tableRuleForm.TableType"
            buttonStyle="solid"
            :disabled="tableIsEidt"
          >
            <a-radio :value="1"> 单例表单 </a-radio>
            <a-radio :value="2"> 聚合表单 </a-radio>
            <a-radio :value="3"> 视图表单 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item has-feedback label="模板编码">
          <a-input v-model="tableRuleForm.JobTempletNo" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="模板名称" prop="JobTempletName">
          <a-input v-model="tableRuleForm.JobTempletName" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="模板序号" prop="JobTempletIndex">
          <a-input
            v-model="tableRuleForm.JobTempletIndex"
            type="number"
            min="1"
          />
        </a-form-model-item>
        <a-form-model-item has-feedback label="模板描述">
          <a-input v-model="tableRuleForm.JobTempletDesc" />
        </a-form-model-item>
        <!-- <a-form-model-item has-feedback label="版本号">
          <a-input v-model="tableRuleForm.JobTempletVisionOut" />
        </a-form-model-item> -->
        <a-form-model-item has-feedback label="分页展示">
          <a-select style="width: 100%" v-model="tableRuleForm.IsPaging">
            <a-select-option v-for="item in pagingStatusList" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback label="指定打印">
          <a-select style="width: 100%" v-model="tableRuleForm.IsPrint">
            <a-select-option v-for="item in printList" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback label="小数位数">
          <a-input v-model="tableRuleForm.DecimalDigits" type="number" />
        </a-form-model-item>
        <a-form-model-item
          has-feedback
          label="审阅不显示分组"
          v-if="tableRuleForm.TableType == 1"
        >
          <a-select style="width: 100%" v-model="tableRuleForm.IsUnShowGroup">
            <a-select-option v-for="item in pagingStatusList" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          has-feedback
          label="数据源"
          v-if="tableRuleForm.TableType == 3"
        >
          <a-select
            style="width: 100%"
            v-model="tableRuleForm.DataSourceID"
            @change="dataSourChange"
          >
            <a-select-option
              v-for="item in sourceList"
              :key="item.DataSourceID"
              :channel="item"
            >
              {{ item.DataSourceName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 新增修改批记录表单 End -->

    <!-- 高级设置 Start -->
    <advanced-settion
      :settionShow.sync="settionShow"
      :settionItem="settionItem"
      :settionList="settionList"
      @upTerm="upTermFun"
    ></advanced-settion>
    <!-- 高级设置 End -->

    <!-- 批量新增项  Start-->
    <batch-quantity
      :show.sync="singletonBatch"
      @addTerm="addTermFun"
      :btnShow="btnShow"
    ></batch-quantity>
    <!-- 批量新增项  End-->

    <!-- 视图表单输入条件 Start -->
    <condition-model
      :show.sync="conditionShow"
      :item="singletonInfo"
      :list="singletonInfo.conditionList"
    ></condition-model>
    <!-- 视图表单输入条件 End -->
  </div>
</template>

<script>
import singletonList from "./singleton-Info.vue";
import AdvancedSettion from "./advanced-setting.vue";
import BatchQuantity from "./quantity-modal.vue";
import PolyTitle from "./polymerize-title.vue"; //聚合表单表头

import ConditionModel from "./condition-model.vue";
import ViewList from "./view-list.vue";
import { getDataSources } from "@/api/DataSource";
import polymerizeTitle from "@/common/handle-title";
import {
  getJobTemplets,
  addJobTemplets,
  updateJobTemplets,
  deleteJobTemplets,
} from "@/api/JobTemplet";
import {
  getJobItems,
  addJobItems,
  updateJobItmes,
  deleteJobItmes,
  getJobItemsGroup,
} from "@/api/JobItem";
import { getDataTypes } from "@/api/PulicBatchRecord";
import BatchTable from "@/views/batch-printing/children/batch-table-box.vue";
export default {
  props: ["show", "currentInfo", "isBill", "billId"],
  components: {
    singletonList,
    AdvancedSettion,
    BatchQuantity,
    BatchTable,
    PolyTitle,
    ViewList,
    ConditionModel,
  },
  data() {
    return {
      conditionShow: false, //视图输入条件
      sourceSearch: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        }, //分页数据
        keyWord: null, //查询字段
      }, //数据源查询
      sourceList: [], //数据源列表
      topObj: {}, //顶部展示信息,
      spinning: true,
      tableRuleForm: {
        JobTempletName: null,
        TableType: 1,
        JobTempletNo: null,
        JobTypeID: null, //工作类别id
        ApprovalProcessID: null, //流程标识
        JobTempletVisionOut: null, //外部版本号
        JobTempletDesc: null, //模板描述
        CreateUserID: JSON.parse(localStorage.getItem("nbcUserInfo")).UserID,
        JobGroupID: null,
        IsPaging: true,
        DataSourceID: null,
        DataSourceName: null,
        DecimalDigits: null,
        IsUnShowGroup: false,
      }, //添加表单信息
      settionShow: false, //高级设置显示
      settionItem: "", //高级设置项信息
      tableRules: {
        JobTempletName: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
        ],
        JobTempletIndex: [
          { required: true, message: "请输入模板序号", trigger: "blur" },
        ],
      }, //添加表单名称校验
      tableVisible: false, //选择新增表单显示
      tableIsEidt: false, //是否新增或修改表单
      singLetonTitleList: [
        { name: "选择", span: 1 },
        { name: "序号", span: 1 },
        { name: "项目类型", span: 2 },
        { name: "数据类型", span: 2 },
        { name: "名称", span: 5, text: "JobItemName" },
        { name: "分组", span: 2, text: "JobGroup" },
        // { name: "描述", span: 2, text: 'JobItemDesc' },
        { name: "详细步骤", span: 2, text: "JobItemDetail" },
        { name: "内容选项", span: 4, text: "PackageSource" },
        { name: "默认值", span: 2, text: "DefaultValue" },
        { name: "必填", span: 1 },

        { name: "设置", span: 1 },
        { name: "操作", span: 1 },
      ], //列表表头
      viewTitleList: [
        { name: "序号", span: 1 },
        { name: "名称", span: 8, text: "JobItemName" },
        { name: "数据源", span: 7, text: "JobItemName" },
        { name: "数据源字段", span: 6, text: "JobItemName" },
        { name: "操作", span: 1 },
      ],
      showText: null,
      batchRecordList: [], //查询列表载体
      dataTypeList: [], //类型列表
      settionList: [], //选中高级设置的所有项
      singletonBatch: false, //批量新增项
      singletonInfo: {}, //批量项保存
      btnShow: false, //批量项保存loading
      pagingStatusList: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
      printList: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
    };
  },
  methods: {
    /* 查询数据源  查询到赋值数据源列表及数据源项 */
    async getDataSourcesFun() {
      let res = await getDataSources(this.sourceSearch);
      this.sourceList = res.Data.Data;
    },
    /* 选中的数据源 */
    dataSourChange(value, option) {
      this.tableRuleForm.DataSourceID = option.data.attrs.channel.DataSourceID;
      this.tableRuleForm.DataSourceName =
        option.data.attrs.channel.DataSourceName;
    },
    // 更新项
    upTermFun(item) {
      this.getJobItemsFun(item);
    },
    //高级设置弹出
    settionFun(data) {
      this.settionShow = data.flag;
      this.settionItem = data.item;
      this.batchRecordList.map((itm) => {
        itm.itemList.map((ditm) => {
          if (ditm.JobItemID == data.item.JobItemID) {
            this.settionList = itm.itemList;
          }
        });
      });
    },
    //删除项更新list
    upListFun(item) {
      if (item.TableType == 2 || item.TableType == 3) {
        this.getJobItemsFun(item);
      } else {
        this.getJobItemsFun(item);
        this.getOneJobItemsFun(item);
      }
    },
    //关闭添加
    onClose() {
      this.$emit("update:show", false);
      this.$emit("upInfo");
    },
    //增加项
    async singletonAdd(item) {
      this.batchRecordList.map((itm, idx) => {
        if (itm.JobTempletID == item.JobTempletID) {
          itm.itemList.push({
            JobTempletID: item.JobTempletID,
            JobItemIndex: item.itemList.length + 1,
            JobItemNo: "",
            JobItemName: "",
            JobGroup: "",
            JobItemDetail: "",
            JobItemDesc: "",
            CreateUser: JSON.parse(localStorage.getItem("nbcUserInfo")).UserID,
            JobItemType: 11,
            MustRecord: false,
            IsLimited: false,
            IsDefault: false,
            PackageSource: "",
            DefaultValue: "",
            DataTypeID: "",
            DataFieldID: "",
            DataSourceName: "",
            DataFieldName: "",
          });
        }
      });
      let res = await getDataTypes({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
      });
      this.dataTypeList = res.Data.Data.filter(
        (itm) => itm.DataTypeName != "附件"
      );
    },
    /* 批量新增项 */
    singletonBatchAdd(item) {
      this.singletonInfo = item;
      this.singletonBatch = true;
    },
    async addTermFun(num) {
      let item = this.singletonInfo;
      this.batchRecordList.map((itm, idx) => {
        if (itm.JobTempletID == item.JobTempletID) {
          for (let index = 0; index < num; index++) {
            itm.itemList.push({
              JobTempletID: item.JobTempletID,
              JobItemIndex: item.itemList.length + 1,
              JobItemNo: "",
              JobItemName: "",
              JobGroup: "",
              JobItemDetail: "",
              JobItemDesc: "",
              CreateUser: JSON.parse(localStorage.getItem("nbcUserInfo"))
                .UserID,
              JobItemType: 11,
              MustRecord: false,
              IsLimited: false,
              IsDefault: false,
              PackageSource: "",
              DefaultValue: "",
              DataTypeID: "",
              DataFieldID: "",
              DataSourceName: "",
            });
          }
        }
      });
      let res = await getDataTypes({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
      });
      this.dataTypeList = res.Data.Data.filter(
        (itm) => itm.DataTypeName != "附件"
      );
      this.singletonBatch = false;
    },
    /* 输入条件 */
    checkCond(itm) {
      this.singletonInfo = itm;
      this.singletonInfo.conditionList = [];
      this.conditionShow = true;
    },
    //删除保存项
    async saveItemFun(itm) {
      let newArr = [];
      let oldArr = [];
      itm.itemList.map((ditem, dindex) => {
        ditem.JobItemIndex = dindex + 1;
        if (ditem.JobItemID) {
          oldArr.push(ditem);
        } else {
          newArr.push(ditem);
        }
      });
      if (newArr.length > 0) {
        let addResult = await addJobItems(newArr);
      }
      if (oldArr.length > 0) {
        let updResult = await updateJobItmes(oldArr);
      }
      if (itm.TableType == 2 || itm.TableType == 3) {
        this.getJobItemsFun(itm);
      } else {
        this.getJobItemsFun(itm);
        this.getOneJobItemsFun(itm);
      }
    },
    //批量删除项
    async delItem(itm) {
      let list = itm.itemList.filter((item) => item.check && item.JobItemID);
      let _this = this;
      this.$confirm({
        title: "提示",
        content: `是否删除选中${list.length}项？`,
        async onOk() {
          setTimeout(async () => {
            let res = await deleteJobItmes(list);
            _this.$notification.success({
              message: "提示",
              description: "删除成功",
            });
            if (itm.TableType == 2 || itm.TableType == 3) {
              _this.getJobItemsFun(itm);
            } else {
              _this.getJobItemsFun(itm);
              _this.getOneJobItemsFun(itm);
            }
          }, 1000);
        },
        onCancel() {},
      });
    },
    //保存项
    async saveItem(itm) {
      let newArr = [];
      let oldArr = [];
      itm.itemList.map((ditem, dindex) => {
        ditem.JobItemIndex = dindex + 1;
        if (ditem.JobItemID) {
          oldArr.push(ditem);
        } else {
          newArr.push(ditem);
        }
      });
      if (newArr.length > 0) {
        let addResult = await addJobItems(newArr);
      }
      if (oldArr.length > 0) {
        let updResult = await updateJobItmes(oldArr);
      }
      this.$notification.success({
        message: "提示",
        description: "保存成功",
      });
      if (itm.TableType == 2 || itm.TableType == 3) {
        this.getJobItemsFun(itm);
      } else {
        this.getJobItemsFun(itm);
        this.getOneJobItemsFun(itm);
      }
    },
    //确认新增表单
    async handleOk() {
      //修改
      if (this.tableIsEidt) {
        let res = await updateJobTemplets(this.tableRuleForm);
        if (res.Success) {
          this.$message.success("修改成功");
          this.getJobTempletsFun();
          this.handleCancel();
        } else {
          this.$message.error(res.Message);
        }
      } else {
        let res = await addJobTemplets(this.tableRuleForm);
        if (res.Success) {
          this.$message.success("新增成功");
          this.getJobTempletsFun();
          this.handleCancel();
        } else {
          this.$message.error(res.Message);
        }
      }
    },
    //取消弹窗
    handleCancel() {
      this.tableRuleForm = {
        JobTempletName: null,
        TableType: 1,
        JobTempletNo: null,
        JobTypeID: null, //工作类别id
        ApprovalProcessID: null, //流程标识
        JobTempletVisionOut: null, //外部版本号
        JobTempletDesc: null, //模板描述
        CreateUserID: JSON.parse(localStorage.getItem("nbcUserInfo")).UserID,
        JobGroupID: this.currentInfo.JobGroupID,
        IsPaging: true,
        DataSourceID: null,
        DataSourceName: null,
        DecimalDigits: null,
      }; //添加表单信息
      this.tableVisible = false;
    },
    //新增表单
    increaseTable() {
      this.tableIsEidt = false;
      this.tableRuleForm.TableType = 1;
      this.tableRuleForm.IsPaging = true;
      this.getDataSourcesFun();
      this.tableVisible = true;
    },
    //修改表单
    editSingleton(item) {
      this.getDataSourcesFun();
      this.tableIsEidt = true;
      this.tableRuleForm = JSON.parse(JSON.stringify(item));
      this.tableVisible = true;
    },
    //删除表单
    delSingleton(item) {
      let _this = this;
      this.$confirm({
        title: "删除表单",
        content: `是否确认删除该表单【${item.JobTempletName}】？`,
        async onOk() {
          let res = await deleteJobTemplets(item);
          if (res.Success) {
            _this.$message.success("删除成功");
            _this.getJobTempletsFun();
          } else {
            _this.$message.error(res.Message);
          }
        },
        onCancel() {},
      });
    },
    //获取工作模板
    async getJobTempletsFun() {
      let res = await getJobTemplets({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
        JobGroupID: this.currentInfo.JobGroupID,
      });
      res.Data.Data.sort((a, b) => a.JobTempletIndex - b.JobTempletIndex);
      res.Data.Data.map((item, index) => {
        item.titleShow = false;
        item.itemTitleList = [];
        item.itemList = [];
        item.titleList = [];
        if (item.TableType == 2 || item.TableType == 3) {
          this.getJobItemsFun(item);
        } else {
          this.getJobItemsFun(item);
          this.getOneJobItemsFun(item);
        }
      });
      if (this.isBill) {
        res.Data.Data.map((item) => (item.titleShow = true));
        this.batchRecordList = res.Data.Data.filter(
          (item) => item.JobTempletID == this.billId
        );
      } else {
        this.batchRecordList = res.Data.Data;
      }
    },

    //获取工作模板下的项 (单例)
    async getOneJobItemsFun(item) {
      let itemRes = await getJobItemsGroup({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
        JobTempletID: item.JobTempletID,
      });
      let list = itemRes.Data.sort((a, b) => {
        return a.JobItemIndex - b.JobItemIndex;
      });
      list.map((item) => {
        item.JobGroup = item.JobGroup.split("。");
        item.JobRecordDetailList = item.JobRecordDetailList.sort((a, b) => {
          return a.JobItemIndex - b.JobItemIndex;
        });
      });
      this.batchRecordList.map((itm, idx) => {
        if (item.JobTempletID == itm.JobTempletID) {
          itm.itemTitleList = list;
        }
      });
    },

    //获取工作模板下的项(聚合)
    async getJobItemsFun(item) {
      let itemRes = await getJobItems({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
        JobTempletID: item.JobTempletID,
      });
      this.batchRecordList.map((itm, idx) => {
        if (item.JobTempletID == itm.JobTempletID) {
          itm.itemList = itemRes.Data.Data;
        }
        if (itm.TableType == 2 || itm.TableType == 3) {
          itm.titleList = polymerizeTitle.handleTitleList(itm.itemList);
        }
      });
    },
  },
  watch: {
    show: {
      async handler(newValue, oldValue) {
        if (newValue) {
          this.tableRuleForm.JobGroupID = this.currentInfo.JobGroupID;
          this.getJobTempletsFun();
          let res = await getDataTypes({
            pageRequestModel: {
              pageIndex: 1,
              pageSize: 1000,
            },
          });
          this.dataTypeList = res.Data.Data.filter(
            (itm) => itm.DataTypeName != "附件"
          );
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.drawer-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  background: #ffffff;
  padding: 1rem;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-close {
      height: 2.5rem;
      width: 2.5rem;
      cursor: pointer;

      img {
        height: 100%;
        width: 100%;
      }
    }
  }

  .drawer-content {
    background: #f1f5fb;
    height: calc(100% - 2.75rem);

    overflow-y: auto;

    .singleton-table {
      margin: 0.625rem;
      background: #ffffff;
      padding: 0.625rem;
      border-radius: 0.3125rem;
      box-shadow: 1px 1px 2px #b6b6b6;

      .singleton-title {
        display: flex;
        align-items: center;
        margin-bottom: 0.625rem;
        margin-left: 0.625rem;

        .num-tip {
          height: 1.25rem;
          width: 1.25rem;
          text-align: center;
          border-radius: 50%;
          background-color: #20b2aa;
          color: #f1f5fb;
        }

        .name {
          font-size: 1.25rem;
        }

        & span:nth-child(2) {
          margin: 0 0.625rem;
        }
      }

      .two-batch-table {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .table-header {
        height: 3.3125rem;
        display: flex;
        margin-bottom: 0.9375rem;

        .header-box {
          flex: 0 0 18.75rem;
          height: 3.3125rem;
          display: flex;
          font-size: 0.875rem;
        }

        .title-box {
          text-align: center;
          line-height: 3.3125rem;
          flex: 1;
          border: 1px solid #b6b6b6;
        }

        .title-boxs {
          text-align: center;
          display: flex;
          flex-direction: column;
          flex: 1;
          border: 1px solid #b6b6b6;

          .name {
            border-bottom: 1px solid #b6b6b6;
          }

          .info {
            flex: 1;
            display: flex;

            div {
              white-space: nowrap;
              padding: 0 0.625rem;
              display: flex;
              justify-content: center;
              align-items: center;
              flex: 1;
              border-right: 1px solid #b6b6b6;
            }

            :last-child {
              border-right: none;
            }
          }
        }
      }
    }
  }

  .seetion-box {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 30;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor-click {
  cursor: pointer;
  margin-right: 0.9375rem;
}

.cursor-click:last-child {
  margin: 0;
}

.footer-btn {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
